/*
 * @Description: 
 * @Author: mxy
 * @Date: 2022-11-19 20:08:00
 * @LastEditors: mxy
 * @LastEditTime: 2022-11-19 21:22:33
 */

//封装函数，获取所有数据
async function renderStudent() {
    const { data: res } = await axios.get('/students')
    const arr = res.data.map(item => {
        const { id, age, area, city, gender, group, hope_salary, name, province, salary } = item
        return `<tr>
                <td>${name}</td>
                <td>${age}</td>
                <td>${gender ? '女' : '男'}</td>
                <td>第${group}组</td>
                <td>${hope_salary}</td>
                <td>${salary}</td>
                <td>${province} ${city} ${area}</td>
                <td>
                <a href="javascript:;" class="text-success mr-3"><i data-id="${id}" class="bi bi-pen"></i></a>
                <a href="javascript:;" class="text-danger"><i data-id="${id}" class="bi bi-trash"></i></a>
                </td>
            </tr>`
    })
    document.querySelector('tbody').innerHTML = arr.join('')
    document.querySelector('.total').innerHTML = res.data.length
}
renderStudent()

//模态框
let modal = new bootstrap.Modal(document.querySelector('#modal'))

//点击 + 显示模态框
document.querySelector('#openModal').addEventListener('click', function () {
    modal.show()
    document.querySelector('#modal h5').innerHTML = '添加学员'
    document.querySelector('#form').reset()
})

//省市县
const province = document.querySelector('[name=province]')
const city = document.querySelector('[name=city]')
const area = document.querySelector('[name=area]')

async function getProvince() {
    const { data } = await axios.get('/api/province')
    const arr = data.list.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">--省--</option>' + arr.join('')
}

async function getCity() {
    area.innerHTML = '<option value="">--地区--</option>'
    if (province.value === '') {
        city.innerHTML = '<option value="">--城市--</option>'
        return
    }
    const { data } = await axios.get('/api/city', { params: { pname: province.value } })
    const arr = data.list.map(item => `<option value="${item}">${item}</option>`)
    city.innerHTML = '<option value="">--城市--</option>' + arr.join('')
}
async function getArea() {
    const { data } = await axios.get('/api/area', { params: { pname: province.value, cname: city.value } })
    const arr = data.list.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = '<option value="">--地区--</option>' + arr.join('')
}
getProvince()
province.addEventListener('change', getCity)
city.addEventListener('change', getArea)


//点击确认发送请求，添加学员
document.querySelector('#submit').addEventListener('click', async function () {
    const datas = val(document.querySelector('#form'))
    // console.log(datas)
    datas.age = +datas.age
    datas.gender = +datas.gender
    datas.hope_salary = +datas.hope_salary
    datas.salary = +datas.salary
    datas.group = +datas.group

    const title = document.querySelector('#modal h5')
    if (title.innerHTML === '添加学员') {
        const { data } = await axios.post('/students', datas)
        alert(data.message)
    } else {
        const { data } = await axios.put(`/students/${title.dataset.id}`, datas)
        alert(data.message)
    }
    modal.hide()
    renderStudent()
})

document.querySelector('tbody').addEventListener('click', async function (e) {
    e.preventDefault()
    if (e.target.classList.contains('bi-trash')) {
        if (confirm('确定要删除吗？')) {
            await axios.delete(`/students/${e.target.dataset.id}`)
            renderStudent()
        }
    }
    if (e.target.classList.contains('bi-pen')) {
        document.querySelector('#modal h5').setAttribute('data-id', e.target.dataset.id)
        modal.show()
        document.querySelector('#modal h5').innerHTML = '修改学员'
        const { data } = await axios.get(`/students/${e.target.dataset.id}`)
        province.value = data.data.province
        await getCity()
        city.value = data.data.city
        await getArea()
        val(document.querySelector('#form'), data.data)
    }
})